<!DOCTYPE html>
<html lang="en" layout:decorator="common/contentLayout"
      th:with="
      site1='首页',
      site2='队列管理'
      "
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<!--页面内容 继承自common/layout.html-->
<div layout:fragment="content">
    <form class="layui-form" id="queryForm">
        <div class="layui-form-item layui-inline">
            <div class="layui-input-inline">
                <input type="text" value="" id="id" name="id" placeholder="请输入队列编号" th:value="${queueId}" class="layui-input search_input"/>
            </div>
           <!-- <div class="layui-input-inline">
                <input type="text" value="" id="dbNodeId" name="dbNodeId" placeholder="请输入节点编号" class="layui-input search_input"/>
            </div>-->
            <div class="layui-input-inline">
                <select id="dbNodeId" name="dbNodeId" lay-filter="dbNodeSelect" lay-search>
                    <option value="">请选择数据节点</option>
                    <option th:each="dataSource:${dataSources}" th:value="${dataSource.key}" th:text="${dataSource.value.dbName}"></option>
                </select>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">消息主题：</label>
                <div class="layui-input-block" style="width: 300px">
                    <select lay-ignore id="topicName" name="topicName" required lay-verType="topicName" lay-verify="required" class="layui-input">
                    </select>
                </div>
            </div>
            <div class="layui-input-inline">
                <select id="isReadOnly" class="search-select">
                    <option value="">请选择读写状态</option>
                    <option value ="1">读写</option>
                    <option value ="2">只读</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select id="nodeTypeId" class="search-select">
                    <option value="">请选择队列类型</option>
                    <option value ="1">正常</option>
                    <option value ="2">失败</option>
                </select>
            </div>

            <div class="layui-input-inline">
                <select id="distributeType" class="search-select">
                    <option value="">请选择分配状态</option>
                    <option value ="1">已分配</option>
                    <option value ="2">未分配</option>
                    <option value ="3">清理中，不可用</option>
                </select>
            </div>
            <a class="layui-btn" id="queueSearchList_btn" lay-filter="queueSearchList_btn"><i class="layui-icon">&#xe615;</i>查询</a>
            <a class="layui-btn" id="abnormalMinId" lay-filter="abnormalMinId"><i class="layui-icon">&#xe615;</i>异常MinId</a>

        </div>
    </form>
    <!--<a class="layui-btn topicSearchList_btn" id="createDbNode"><i class="layui-icon">&#xe608;</i>创建</a>-->
    <table id="queueTable" class="layui-table" lay-data="{height:'full', page:true,limit: 10, id:'queueTable'}" lay-filter="queueTable">
        <thead>
        <tr>
            <th lay-data="{field: 'id', align: 'center', sort: true,templet:'#idTpl', width:'6%',fixed:'left'}">队列编号</th>
            <th lay-data="{field: 'dbNodeId', align: 'center', width:'7%',fixed:'left'}">数据节点编号</th>
            <th lay-data="{field: 'ip', align: 'center', width:'15%',fixed:'left'}">ip</th>
            <th lay-data="{field: 'dbName', align: 'center', width:'15%'}">数据库名</th>
            <th lay-data="{field: 'tbName', align: 'center', width:'10%'}">表名</th>
            <th lay-data="{field: 'dbReadOnly', align: 'center', templet:'#dBReadOnlyTpl', width:'6%'}">库状态</th>
            <th lay-data="{field: 'topicName', align: 'center', templet:'#useStatusTpl', width:'15%'}">topic</th>
            <th lay-data="{field: 'nodeType', align: 'center', templet:'#nodeTypeTpl', width:'6%'}">存储类型</th>
            <th lay-data="{field: 'readOnly', align: 'center', templet:'#readOnlyTpl', width:'6%'}">读写状态</th>
            <th lay-data="{field: 'msgCount', align: 'center', width:'6%'}">消息总量</th>
            <th lay-data="{field: 'minId', align: 'center', width:'6%'}">最小Id</th>
            <th lay-data="{field: 'insertTime',align: 'center', width:'6%'}">创建时间</th>
            <th lay-data="{field: 'updateTime',align: 'center', width:'6%'}">更新时间</th>
            <th lay-data="{fixed: 'right', align:'center',width:240, toolbar: '#ctrlBar'}">操作区</th>
        </tr>
        </thead>
    </table>
    <div style="display: none">
        <div id="queueEditFormDiv">
            <form th:include="queue/queueEdit::queueEditForm" class="layui-form" id="queueDetailForm" action="" ></form>
        </div>
    </div>
</div>

<div layout:fragment="end-load-files">
    <script th:src="@{/js/queue.js}"></script>
    <script type="text/html" id="idTpl">
        <a href onclick="return false" >
<img src="/images/log.png"  data-id="{{= d.id }}"
                                          class="logSearch"/></a>&nbsp;&nbsp;{{= d.id }}
    </script>

    <script th:inline="javascript">
        var loginUserRole = [[${loginUserRole}]];
    </script>

    <script type="text/html" id="useStatusTpl">
        {{# if (d.topicName == null || d.topicName == '' || d.topicName == 'undefine') { }}

        {{# } else { }}
        {{d.topicName}}
        {{# } }}
    </script>
    <script type="text/html" id="nodeTypeTpl">
        {{# if (d.nodeType == 1) { }}
        <label><span class="layui-badge layui-bg-green">正常</span></label>
        {{# } else { }}
        <label><span class="layui-badge">失败</span></label>
        {{# } }}
    </script>
    <script type="text/html" id="readOnlyTpl">
        {{# if (d.readOnly == 1) { }}
        <label><span class="layui-badge layui-bg-green">读写</span></label>
        {{# } else { }}
        <label><span class="layui-badge">只读</span></label>
        {{# } }}
    </script>
    <script type="text/html" id="dBReadOnlyTpl">
        {{# if (d.dbReadOnly == 1) { }}
        <label><span class="layui-badge layui-bg-green">读写</span></label>
        {{# } else if(d.dbReadOnly == 2){ }}
        <label><span class="layui-badge">只读</span></label>
        {{# } else { }}
        <label><span class="layui-badge layui-bg-orange">不可读写</span></label>
        {{# } }}
    </script>
    <script type="text/html" id="ctrlBar">
        {{# if(d.role == 1){ }}
        {{# if (d.topicName == null || d.topicName == '' || d.topicName == 'undefine') { }}
        <a  class="layui-btn layui-btn-normal layui-btn-xs"  lay-event="edit">编辑</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="readOnly" id="isReadOnlyTab">
            {{# if (d.readOnly == 2) { }}
            设成读写
            {{# } else { }}
            设成只读
            {{# } }}
        </a>
        <a  class="layui-btn layui-btn-danger layui-btn-xs"  lay-event="remove">移除</a>
        {{# } }}

        {{# if (d.msgCount <0&&loginUserRole == 0) { }}
        <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="repairMinId">修复minId</a>
        {{# } else { }}

        {{# } }}


        {{# }else { }}
        无权限
        {{# } }}
    </script>
    <style type="text/css">
        .warn1 {
            color: red;
            font-size: large;
            font-weight: bold;
        }
    </style>
</div>
</html>
